
@import "globals.less";
/*@import "libs/bootstrap.less";*/


/* Adding these next 2 rules to try to deal with jQuery Layout (panes) plugin */
html, body {
  height: 100%;
}
html {
  /*overflow: hidden; */
}

* {
  margin:0;
  padding:0;
}
/** General Style Info **/  
body {
  /* Adding this next line to try to deal with jQuery Layout (panes) plugin */
  /*overflow: auto; */
  
  background:black;
  color:#ffffff;
  font-family: 'lucida grande', verdana, helvetica, arial, sans-serif;
  font-size:90%;
  margin:0;
}
a {
  color:#003d4c;
  text-decoration:underline;
  font-weight:bold;
  img {
    border:none;
  }
}
a:hover {
  color:#367889;
  text-decoration:none;
}


h1, h2, h3, h4 {
	font-weight: normal;
	margin-bottom:0.5em;
}
h2,h3, dl dt.heading {
  font-family:'Gill Sans','lucida grande', helvetica, arial, sans-serif;
  font-weight: bold;
}

h1 {
	color: #003d4c;
	font-size: 100%;
}
h2 {
	font-size: 190%;
}
h3, dl dt.heading {
	/*color: #993;  /* Red-ish */
  /*color: #ff9c08; /* Orange */
	font-size: 165%;
}
h4 {
  color:#999933;
}

h2, h3, dl dt.heading {
  /* orange - a little darker than logo orange. shows well on very light bg */
  color: @colorHeaderOrange;
}

dl {
  line-height:2em;
  margin:0em 0em;
  width:60%;
  /* nested selectors */
  dt.heading {
    font-size:165%;
  }
  .altrow {
    background:#f4f4f4;
  }
}

dt {
  font-weight:bold;
  padding-left:4px;
  vertical-align:top;
}
dd {
  margin-left:10em;
  margin-top:-2em;
  vertical-align:top;
}


ul, li {
  margin:0 12px;
}

/**********************  Layout ***********************/
#container {
  text-align:left;
}
div.center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

#header, #footer {
  background-color: #121212;
}

#header {
  padding:10px 20px;
  border-top:3px solid #444;
  border-bottom:4px solid #444;
  min-width:500px;
  /* nested selectors */
  img#logo_reflect {
    margin-bottom:-20px;
  }
  img.logo {
    margin-top:12px;
    display:inline-block;
    margin-right:28px;
  }
  ul#mainMenu {
    display:inline-block;
    vertical-align:top;  /* default was 'baseline', causing menu to stick to bottom of header */
    margin-top:9px;
    float:right;
  }
  h1 {
    line-height:20px;
    /*background: #003d4c url('../img/cake.icon.png') no-repeat left;*/
    color:#ffffff;
    padding:0px 30px;
    a {
      color:#ffffff;
      font-weight:normal;
      text-decoration:none;
    }
    a:hover {
      color:#ffffff;
      background:#003d4c;
      text-decoration:underline;
    }
  }
} /* end #header */

#footer {
  clear:both;
  padding:6px 10px;
  text-align:right;
  min-height:35px;
  border-top:5px solid #666666;
  /*width:100%;*/
}
#content {
  clear:both;
  color:#333;
  padding:10px 20px 40px 20px;
  overflow:auto;
  background-color:#333333; /* fallback */
  /*background-image:-webkit-linear-gradient( #333333,#999999,#dfdfdf);
  background-image:-moz-linear-gradient(top,#333333,#999999,#dfdfdf);
  background-image:linear-gradient(         #333333,#999999,#dfdfdf);
  */
  background-image:-webkit-linear-gradient( #333,#888,#aaa);
  background-image:-moz-linear-gradient(top,#333,#888,#aaa);
  background-image:linear-gradient(         #333,#888,#aaa);
  
  /*div.form, div.index, div.view {*/
  div.form {
    padding:10px 2%;
  }
  /*
  div.form, div.index {
    width:85%;
  }*/
  
  div.view, div.index {
    /*background: #f8f8f8;*/
    /*background: #f8f8fa; /* slightly blueer than above - makes orange text pop a bit */
  }
  /* Generic "panel" styling */
  .panel {
    padding: 10px 2%;
    .rounded10;
    background: @colorBgLightBlueishGray;
    border: 2px solid darkGray;
    
    .panel {
      .rounded8;
      border: none;
      background: #fff;
      
      /*border: 2px solid #DFDFDF;*/
      border: 2px solid rgba(218, 218, 218, .7);
      padding: 3px;
      padding-bottom: 8px;
      
    }
  }
} /* end #content */

/* Action buttons - not really using these now */
div.actions {
  float:left;
  width:16%;
  padding:10px 1.5%;
  
  h3 {
    padding-top:0;
    color:#777777;
  }
  ul {
    margin:0;
    padding:0;
    li a {
      font-weight:normal;
      font-weight:normal;
      display:block;
      clear:both;
      padding:4px 8px;
      background:#e6e49f;
      background:      -webkit-gradient(linear,left top,left bottom,from(#f1f1d4),to(#e6e49f));
      background-image:-moz-linear-gradient(top,#f1f1d4,#e6e49f);
      color:#333;
      border:1px solid #aaac62;
      -webkit-border-radius:8px;
      -moz-border-radius:   8px;
      border-radius:        8px;
      text-decoration:none;
      text-shadow:#fff 0px 1px 0px;
      min-width:0;
    }
    li a:hover {
      text-decoration:underline;
      background:#f0f09a;
      background:-webkit-gradient(linear,left top,left bottom,from(#f7f7e1),to(#eeeca9));
    }
  } /* end "div.actions > ul" */
  li {
    margin:0 0 0.5em 0;
    list-style-type:none;
    white-space:nowrap;
    padding:0;
  }
} /* end div.actions */

/********************* TABLES *********************/
table {
  background:#fff;
  border-right:0;
  clear:both;
  color:#333;
  margin-bottom:10px;
  width:  100%;
  /*width: inherit;*/
  
  border-collapse:separate; /* give some space between cells. See http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/ */
  
  tr td {
    background:#fff;
    padding:    6px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
    /*border-right:  3px solid white;*/
  }
  .altrow td {
    background:#f5f5f5;
  }
  /* This was causing problems in my Job view (listing all job versions) */
  /*
  tr:nth-child(2n +1) td {
    background: #f5f5f5;
  }
  */
  a {
    text-decoration:none;
  }
  td.actions a {
    margin:0px 6px;
    padding:2px 5px;
  }
  td.actions {
    text-align:center;
    white-space:nowrap;
  }
  th {
    border:0;
    border-bottom:2px solid #555;
    text-align:left;
    padding:      4px;
    padding-left: 7px;
    /*border-right:3px solid white;*/

    #gradientVert7to3; 
    /*.rounded3;*/
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    
    color: #ddd;

    a {
      display:block;
      padding:2px 4px;
      text-decoration:none;
      color: #ddd;
    }
    a:hover {
      color: @colorHeaderOrange;
    }
    
    a.asc:after {
      content:' ⇣';
    }
    a.desc:after {
      content:' ⇡';
    }
  } /* end th */
  
  th:last-child, td:last-child { /* change styling of last th and td of each row  */
    border-right: none;
  } 
  tr:last-child td {
    border-bottom: none;
  }
  
  th:empty{
    background:transparent;
    border:none;
  }

  
} /* end table */




.cake-sql-log table {
  background:#f4f4f4;
}
.cake-sql-log td {
  padding:4px 8px;
  text-align:left;
  font-family:Monaco, Consolas, "Courier New", monospaced;
}
.cake-sql-log caption {
  color:#ffffff;
}

div.paging {
  color:#cccccc;
  margin-top:1em;
  clear:both;
  span.disabled {
    color:#dddddd;
    display:inline;
  }
  span.current {
    color:#c73e14;
  }
  span a {
  }
}


/****************  FORM  ***************/
form {
  clear:   both;
  margin-right:20px;
  padding: 0;
  width:   95%;
  
  div {
    clear:both;
    margin-bottom: 1em;
    padding:       .5em;
    vertical-align:text-top;
  }
  .input {
    color:#444;
  }
  .required {
    font-weight:bold;
    label:after {
      color:   #ee3322; /* redish */ 
      content: '*';
      display:inline;
    }
  }
  .override_required {
    font-weight:normal;
    label:after {
      content:'';
      display:inline;
    }
  }
  div.submit {
    border:0;
    clear:both;
    margin-top:10px;
  }
  .submit input[type=submit] {
    background: #62af56; /* rich green */
    background:      -webkit-gradient(linear,left top,left bottom,from(#a8ea9c),to(#62af56));
    background-image:-moz-linear-gradient(top,#a8ea9c,#62af56);
    border-color:#2d6324;
    color:#000000;
    text-shadow:#8cee7c 0px 1px 0px;
    :hover {
      background:#4ca83d; /* deeper rich green */
      background:      -webkit-gradient(linear,left top,left bottom,from(#85e573),to(#4ca83d));
      background-image:-moz-linear-gradient(top,#85e573,#4ca83d);
    }
  }
  .guidance {
    color:      gray;
    font-size:  .75em;
    margin-top:  1px;
    margin-left: 5px;
    display:     block;
    font-weight: normal;
  }
} /* end form */

fieldset {
  border: 1px solid #cccccc;
  margin-bottom: 1em;
  padding: 16px 20px;
  
  legend {
    background:#fff;
    color:#ee3322;
    font-size:160%;
    font-weight:bold;
  }
  fieldset { /* nested fieldset */
    margin-top:    0px;
    margin-bottom: 20px;
    padding: 16px 10px;
    legend {
      font-size:120%;
      font-weight:normal;
    }
    div {
      clear:left;
      margin:0 20px;
    }
  }
} /* end fieldset */

label {
  display:   block;
  font-size: 100%;
  margin-bottom: 3px;
}
input, textarea {
  clear:both;
  font-size:105%;
  font-family:"frutiger linotype", "lucida grande", "verdana", sans-serif;
  padding:1%;
  width:25em;
}
select {
  clear:both;
  font-size:120%;
  vertical-align:text-bottom;
}
select[multiple=multiple] {
  width:100%;
}
option {
  font-size:120%;
  padding:0 3px;
}
input[type=checkbox] {
  clear:left;
  float:left;
  margin:0px 6px 7px 2px;
  width:auto;
}
div.checkbox label {
  display:inline;
}
input[type=radio] {
  float:left;
  width:auto;
  margin:0 3px 7px 0;
}
div.radio label {
  margin:0 0 6px 20px;
}

input[type=submit], td.actions a {
  font-weight:normal;
  padding:4px 8px;
  background:#e6e49f;
  background:-webkit-gradient(linear,left top,left bottom,from(#f1f1d4),to(#e6e49f));
  background-image:-moz-linear-gradient(top,#f1f1d4,#e6e49f);
  color:#333333;
  border:1px solid #aaac62;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  text-decoration:none;
  text-shadow:#ffffff 0px 1px 0px;
  min-width:0;
}
input[type=submit] {
  display:inline;
  font-size:110%;
  width:auto;
}

input[type=submit]:hover, td.actions a:hover {
  background:#f0f09a;
  background:-webkit-gradient(linear,left top,left bottom,from(#f7f7e1),to(#eeeca9));
}



/**************************************************************/
/**************** Notices and Errors **************************/

/* commenting this one out so it doesn't conflict with my nested '.message' below
div.message {
  clear:both;
  color:#fff;
  font-size:140%;
  font-weight:bold;
  margin:0 0 1em 0;
  background:#c73e14;
  padding:5px;
} */
div.error-message {
  clear:both;
  color:#ffffff;
  font-weight:bold;
  background:#c73e14;
}
p.error {
  background-color:#ee3322;
  color:#ffffff;
  font-family:Courier, monospace;
  font-size:120%;
  line-height:140%;
  padding:0.8em;
  margin:1em 0;
  em {
    color:#000000;
    font-weight:normal;
    line-height:140%;
  }
}
.notice {
  background:#ffcc00;
  color:#000;
  display:block;
  font-family:Courier, monospace;
  font-size:120%;
  line-height:140%;
  padding:0.8em;
  margin:1em 0;
}
.success {
  background:green;
  color:#fff;
}
/* JF */
/* Using jQuery Tools "overlay" to make this div into a modal */
.modal {
  /* overlay must be hidden before loading */
	display:none;
  /*border: 5px solid #999;*/
  /* for modern browsers use semi-transparent color on the border. */
	border:  8px solid rgba(173, 173, 173, 0.3);
  background-color: rgba(165, 165, 165, 0.6); /* semi-trans bg */
  width: 80%;
  padding: 5px 8px;
  /* Rounded corners: */
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  /* close image (x) for the apple-overlay modal.  Position the img in corner  */
  a.close {
    background-image:url('../img/apple_overlay_close.png');
    position:absolute;
    left:-16px;
    top:-16px;
    cursor:pointer;
    height:35px;
    width:35px;
  }
}

/* Common properties for all the flash messages */
#messages, #AjaxMessages {
  
  font-size: 125%;
  .success, .error, .warning, .info, .message {
  
    background-repeat: no-repeat;
    border: 2px solid;
    margin: 4px 0px;
    padding:10px 10px 10px 52px;
    background-repeat: no-repeat;
    background-position: 10px center; /* position the background img with 10px margin on its left, centered vertically */
    /*font-size: 125%;*/
    
    /* Rounded corners: */
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    /*display: inline-block; /* limit the div's width to just big enough for the content */
    /*width: 80%;*/
    display: block; /* put each msg on its own line */
  }  
}

/* Properties specific to each flash msg type: */
#messages, #AjaxMessages {
  .info, .message {
    /* color: #00529B; */
    color: black;
    border-color: #00529B;
    background-color: #BDE5F8;
    /*background-image: url('../img/Info.png');
    background-size:  32px; /* a css3 property to limit size of the background-image */
    background-image: url('../img/documentinfo-32.png');
  } 
  .success {
    /* color: #4F8A10; */
    color: black;
    border-color: #4F8A10;
    background-color: #DFF2BF;
    background-image: url('../img/success-32.png');
  }  
  .error {
    clear: both;
    color: #fff;
    font-weight: bold;
    background-color: #c73e14; /* red */
    /*background-image: url('../img/Critical.png');
    background-size:  32px; /* a css3 property to limit size of the background-image */ 
    background-image: url('../img/agt_stop-32.png');
  }
  .warning {
    color: black;
    border-color: #fbbf05;
    background-color: #FFFABF;
    background-image: url('../img/Warning-32.png');
    /*background-size:  32px; /* a css3 property to limit size of the background-image */ 
    /*  background-image: url('../img/agt_update_critical-32.png');*/
  }
}

#AjaxMessages, .purrMessage {  
  background-color: rgba(165, 165, 165, 0.65);
  width: auto;  /* override '.modal' width setting */
  position: relative; /* so that the 'close' button will be positioned relative to this container */
  margin-bottom: 10px; /* create some space between each message */
  font-size: 105%;
  /* slightly-transparent bg colors for the messages  */
  .error {
    background-color: rgba(199,62,20, .79);
  }
  .success {
    background-color: rgba(223,242,191, .9);
  }
  .info, .message {
    background-color: rgba(189,229,248, .82);
  }
  .warning {
    background-color: rgba(255,250,191, .84);
  }
}


#purr-container {
  position: fixed;
  top: 20px;
  right: 28px;
  width: 40%;
  /*font-size: 90%;*/
}



.fijiAjaxWaitMsg {
  background-image: url('../img/busy.gif');
  background-repeat: no-repeat;
  padding-left: 12px; /* make room for the bg 'busy' img  */
}

/* ------------ end Notices and Errors section ---------------- */



div.related {
  clear:both;
  display:block;
}
pre {
  color:#000000;
  background:#f0f0f0;
  padding:1em;
}
pre.cake-debug {
  background:#ffcc00;
  font-size:120%;
  line-height:140%;
  margin-top:1em;
  overflow:auto;
  position:relative;
}
div.cake-stack-trace {
  background:#ffffff;
  color:#333333;
  margin:0px;
  padding:6px;
  font-size:120%;
  line-height:140%;
  overflow:auto;
  position:relative;
  pre {
    color:#000000;
    background-color:#f0f0f0;
    margin:0px;
    padding:1em;
    overflow:auto;
  }
}
div.cake-code-dump pre {
  position:relative;
  overflow:auto;
  overflow:auto;
  overflow:auto;
  color:#000000;
  background-color:#f0f0f0;
  margin:0px;
  margin:4px 2px;
  padding:1em;
  padding:4px;
  clear:both;
  font-size:12px;
  line-height:15px;
  code {
    clear:both;
    font-size:12px;
    line-height:15px;
    margin:4px 2px;
    padding:4px;
    overflow:auto;
  }
}
div.cake-code-dump span.code-highlight {
  background-color:#ffff00;
  padding:4px;
}
div.code-coverage-results div.code-line {
  padding-left:5px;
  display:block;
  margin-left:10px;
}
div.code-coverage-results div.uncovered span.content {
  background:#eecccc;
}
div.code-coverage-results div.covered span.content {
  background:#cceecc;
}
div.code-coverage-results div.ignored span.content {
  color:#aaaaaa;
}
div.code-coverage-results span.line-num {
  color:#666666;
  display:block;
  float:left;
  width:20px;
  text-align:right;
  margin-right:5px;
  strong {
    color:#666666;
  }
}
div.code-coverage-results div.start {
  border:1px solid #aaaaaa;
  border-width:1px 1px 0px 1px;
  margin-top:30px;
  padding-top:5px;
}
div.code-coverage-results div.end {
  border:1px solid #aaaaaa;
  border-width:0px 1px 1px 1px;
  margin-bottom:30px;
  padding-bottom:5px;
}
div.code-coverage-results div.realstart {
  margin-top:0px;
}
div.code-coverage-results p.note {
  color:#bbbbbb;
  padding:5px;
  margin:5px 0 10px;
  font-size:10px;
}
div.code-coverage-results span.result-bad {
  color:#aa0000;
}
div.code-coverage-results span.result-ok {
  color:#ffaa00;
}
div.code-coverage-results span.result-good {
  color:#00aa00;
}





img.icon {
  vertical-align:middle;
  margin-right:5px;
}

.rounded10 {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}
.rounded9 {
  -moz-border-radius:9px;
  -webkit-border-radius:9px;
  border-radius:9px;
}
.rounded8 {
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
}
.rounded7 {
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}
.rounded6 {
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
}
.rounded5 {
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}
.rounded4 {
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}
.rounded3 {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
}


.shadow5 {
  -moz-box-shadow:5px 5px 5px #999999;
  -webkit-box-shadow:5px 5px 5px #999999;
  box-shadow:5px 5px 5px #999999;
}
.shadow3 {
  box-shadow:inset 0px 1px 1px white, 2px 3px 3px rgba(0,0,0,0.3);
}
.shadow2 {
  box-shadow:inset 0px 1px 1px white, 1px 2px 2px rgba(0,0,0,0.3);
}


#gradientVert7to3 {
    background-image:-webkit-linear-gradient( #777,#333);
    background-image:-moz-linear-gradient(top,#777,#333);
    background-image:linear-gradient(         #777,#333);
}


/* ------- File Explorer accessible as a modal overlay from any page ------------------ */
div#file_exp {
  border-style: solid; 
  border-width: 1px; 
  border-color: darkslategray;
  
  /*
  background-image: url('../img/modal_bg_black.png');*/
 
}
div#file_exp_container.modal {
    /* The 'growing' bg image */ 
    /*background-image: url('../img/modal_bg_black.png');*/
    background-image: url('../img/apple_effect_bg.png');
    /*background-repeat:repeat-x;*/
    width: 90%;
    /*height: 70%;*/
    
}


/* This is needed to override a cake.generic.css setting that conflicted with Elfinder's table css */
#file_exp table tr td {
  background-color: transparent;
  border-right: inherit;
}
#file_exp table tr th {
  border-right: inherit;
}




